<template>
  <div>
    <div>{{ x }}</div>
    <button @click="changCount">更改count的值</button>
  </div>
</template>

<script setup lang="ts">
/* watch(WatcherSource, Callback, [WatchOptions])
  参数：
  WatcherSource：想要监听的响应式数据。
  Callback：执行的回调函数，入参（newValue,oldValue）。
  [WatchOptions]：deep、immediate、flush可选。

    deep:当需要对对象等引用类型数据进行深度监听时，设置deep: true,默认值是false。
  immediate：默认情况下watch是惰性的，设置immediate: true时，watch会在初始化时立即执行回调函数一次。
  flush：控制回调函数的执行时机，。它可设置为 pre、post 或 sync。
    pre：默认值，当监听的值发生变更时，优先执行回调函数（在dom更新之前执行）。
    post：dom更新渲染完毕后，执行回调函数。
    sync:一旦监听的值发生了变化，同步执行回调函数（建议少用）。

 */
import { ref, watch } from 'vue'
const x = ref(1)
const y = ref(5)
function changCount() {
  x.value++
}
watch(
  () => x.value + y.value,
  (sum, old) => {
    console.log(`我是x与y之和${sum}`, `我的旧的值${old}`)
  }
)
</script>

<style></style>
